<template>
	<div>
		<div class="poetry-content">
			<div class="img-bg"></div>
			<div class="poetry-content-bg" :style="{ backgroundImage: getRandomColor }">
				<h1 class="poetry-title">{{ articleContent.title }}</h1>
				<div class="poetryt-lang">
					<span class="bot">—— {{ articleContent.author }}</span>
				</div>
				<div class="poetry-info"><p v-html="articleContent.contentFormat"></p></div>
				<div class="poetry-foot">
					<time class="bot">{{ articleContent.createTime | dateformatDate }}</time>
				</div>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</div>
		</div>
		<YRComment :articleId="Number($route.query.id)"></YRComment>
	</div>
</template>

<script>
import { getArticle } from '@/api/article';
import YRComment from '@/components/common/YRComment.vue';
export default {
	name: 'PoetryContent',
	components: {
		YRComment
	},
	data: () => {
		return {
			articleContent: {},
			spinShow: false
		};
	},
	props: {},
	methods: {
		getArticleById() {
			this.spinShow = true;
			getArticle(this.$route.query.id).then(res => {
				this.articleContent = res.data;
				this.spinShow = false;
			});
		}
	},
	computed: {
		getRandomColor() {
			let colorArr = [
				'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)',
				'linear-gradient(to top, #9890e3 0%, #b1f4cf 100%)',
				'linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%)',
				'linear-gradient(to top, #a8edea 0%, #fed6e3 100%)',
				'linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)',
				'linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)',
				'linear-gradient(to top, #c1dfc4 0%, #deecdd 100%)',
				'linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)',
				'linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%)',
				'linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%)',
				'linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%)',
				'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)',
				'linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)',
				'linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%)'
			];
			if (!this.articleContent.createTime) {
				return colorArr[0];
			}
			let n = new Date(this.articleContent.createTime).getHours()%colorArr.length;
			return colorArr[n];
		}
	},
	created() {
		this.getArticleById();
	}
};
</script>

<style scoped="scoped" lang="stylus">
.poetry-content
	min-height 20vh
	padding 60px 20px 
	border-radius 10px
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	position relative
	overflow hidden
	text-align left
	background-color #fff
	.img-bg
		height 100%
		width 100%
		position absolute
		top 0px
		left 0
		z-index 0
	.poetry-content-bg
		width 60%
		padding 20px
		border-radius 10px
		margin 0 auto
		position relative
		.poetry-title
			font-size 22px
			color #444
			margin-bottom 10px
			line-height 42px
			font-weight 400
			text-transform none
			letter-spacing 2px
			position relative
		.poetryt-lang
			padding-left 42px
			font-size 14px
		.poetry-info
			padding-top 20px
			line-height 32px
			font-size 16px
			letter-spacing 1px
		.poetry-foot
			width 100%
			text-align right
			margin-top 60px
</style>
